<template>
  <!-- <div>常用功能</div> -->
  <div class="layout">
    <div class="box">
      <!-- 常用功能 -->
      <div class="function">
        <div class="title">常用功能</div>
        <div class="function-items">
          <div class="item" v-for="item in 8" :key="item">课程安排</div>
        </div>
      </div>

      <!-- 卡片区域 -->
      <div class="card">
        <!-- 待办事项 -->
        <div class="schedule">
          <div class="title">待办事项</div>
          <div class="content">
            <div class="todoList">
              <div class="date">
                <!-- <datepick ref="dateRef" /> -->
                <el-calendar v-model="dateVal" />
              </div>
              <div class="todo-item" v-for="item in 4" :key="item">
                <div class="todo-time">上午 09:30</div>
                <div class="todo-content">组织1班级开展班级活动</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 学期进度安排 -->
        <div class="plan">
          <div class="title">学期进度安排</div>
          <div class="content">
            <div class="planList">
              <div
                class="plan-item"
                v-for="item in planList"
                :key="item"
                :style="{ backgroundColor: item.bgc }"
              >
                <span class="month">{{ item.month }}</span>
                <p
                  v-for="val in item.content"
                  :key="val"
                  :style="{ '--bullet-color': item.circle }"
                >
                  {{ val }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <!-- 通知公告 -->
        <div class="notice">
          <div class="title">通知公告</div>
          <div class="content">
            <div class="noticeList">
              <div class="notice-item" v-for="item in 4" :key="item">
                <div class="notice-time">2022-02-11 12:39:23</div>
                <div class="notice-content">
                  这类事情老让我笑疼肚皮，我老是在跟人说“见到你真高兴”，其实我见到他可一点也不高兴。你要是想在这世界上活下去，就得说这类话。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <question />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import question from '../components/question.vue'

const planList = ref([
  {
    month: '2月份',
    bgc: '#ECF5FF',
    circle: '#409EFF',
    content: ['特斯拉韭菜告诉你：政府为什么扶持电动车？DannyWiki', 'HBO这次的尺度，真是万万没想到…']
  },
  {
    month: '3月份',
    bgc: '#F0F9EB',
    circle: '#67C23A',
    content: [
      '日本家居除了下沉式玄关，还有哪些令人惊叹的设计？',
      '晚上失眠，死活睡不着的时候，你会做什么？',
      '东野圭吾的小说中，哪些值得推荐？为什么？',
      'Steam玩家一定要拥有的游戏是什么？'
    ]
  },
  {
    month: '4月份',
    bgc: '#FCF6EC',
    circle: '#E6A23C',
    content: [
      '日本家居除了下沉式玄关，还有哪些令人惊叹的设计？',
      '晚上失眠，死活睡不着的时候，你会做什么？',
      '东野圭吾的小说中，哪些值得推荐？为什么？',
      'Steam玩家一定要拥有的游戏是什么？'
    ]
  },
  {
    month: '5月份',
    bgc: '#FEF0F0',
    circle: '#F56C6C',
    content: [
      '日本家居除了下沉式玄关，还有哪些令人惊叹的设计？',
      '晚上失眠，死活睡不着的时候，你会做什么？',
      'Steam玩家一定要拥有的游戏是什么？'
    ]
  },
  {
    month: '6月份',
    bgc: '#F4F4F5',
    circle: '#909399',
    content: ['为什么游戏行业近十年几乎没有任何进展?', '为什么很多人认为脂肪在格斗中比肌肉重要？']
  }
])
</script>

<style lang="scss" scoped>
.layout {
  display: flex;

  .box {
    display: flex;
    flex-direction: column;
    min-width: 1309px;
    height: 1000px;

    .function {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      max-width: 987px;
      .title {
        display: flex;
        align-items: center;
        font-size: 18px;
        line-height: 24px;
        color: #131414;
        &::before {
          content: '';
          display: inline-block;
          margin-right: 8px;
          width: 6px;
          height: 6px;
          border-radius: 6px;
          background-color: #409eff;
        }
      }
      .function-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
          padding: 8px 20px;
          background: #fff;
          margin-top: 20px;
          display: flex;
          justify-content: center;
          align-items: center;

          font-size: 14px;
          line-height: 24px;
          color: #131414;
        }
      }
    }
    .card {
      margin-top: 40px;
      display: flex;
      justify-content: space-between;

      // 标题
      .title {
        display: flex;
        align-items: center;
        font-size: 18px;
        line-height: 24px;
        color: #131414;

        &:before {
          content: '';
          display: inline-block;
          margin-right: 8px;
          width: 6px;
          height: 6px;
          border-radius: 6px;
          background-color: #409eff;
        }
      }

      // 待办事项
      .schedule {
        display: flex;
        flex-direction: column;
        max-height: 788px;

        .content {
          margin-top: 14px;
          padding: 24px 24px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          max-height: 742px;
          border-radius: 8px;
          background: #ffffff;
          box-shadow: 4px 5px 16px 0px rgba(0, 0, 0, 0.04);

          .date {
            width: 312px;
            max-height: 324px;
            border: 1px solid #e4e7ed;
            box-sizing: border-box;
          }
          .todoList {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .todo-item {
              margin: 20px 30px 24.5px 0;
              display: flex;
              align-items: center;
              border-radius: 8px;
              background: #f5f7fa;

              .todo-title {
                padding: 12px 16px;
                font-size: 16px;
                font-weight: bold;
                line-height: 24px;
                color: #131414;
              }

              .todo-time {
                padding: 12px 16px;
                font-size: 14px;
                font-weight: bold;
                line-height: 24px;
                color: #606266;
              }

              .todo-content {
                font-size: 14px;
                line-height: 24px;
                color: #606266;
              }
            }
          }
        }
      }

      // 学期进度安排
      .plan {
        min-width: 414.5px;
        .content {
          margin-top: 14px;
          padding: 24px 24px;
          max-height: 742px;
          border-radius: 8px;
          background: #ffffff;

          .planList {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            max-width: 366.5px;

            .plan-item {
              padding: 20px 20px;
              min-height: 100px;
              border-radius: 8px;
              background: #ecf5ff;

              .month {
                font-size: 16px;
                line-height: 24px;
                color: #131414;
              }

              p {
                position: relative;
                font-size: 12px;
                line-height: 20px;
                color: #606266;
                &:before {
                  content: '';
                  display: inline-block;
                  margin: 0 8px;
                  width: 6px;
                  height: 6px;
                  border-radius: 6px;
                  background-color: var(--bullet-color);
                }
              }
            }
          }
        }
      }

      // 通知公告
      .notice {
        margin-right: 40px;
        .content {
          margin-top: 14px;
          padding: 24px 24px;
          max-height: 742px;
          border-radius: 8px;
          background: #fff;

          .noticeList {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 20px;
            max-width: 366.5px;
            .notice-item {
              padding: 20px 20px;
              border-radius: 8px;
              background: #f4f4f5;

              .notice-time {
                font-size: 12px;
                line-height: 20px;
                color: #909399;
              }

              .notice-content {
                font-size: 16px;
                line-height: 24px;
                color: #131414;
              }
            }
          }
        }
      }
    }
  }
}

:deep(.el-calendar) {
  width: 100%;
  height: 100%;
}
:deep(.el-calendar__header) {
  padding: 12px 12px;
}
:deep(.el-calendar-table) {
  width: 100%;
}

:deep(.el-calendar-day) {
  width: 100%;
  height: 100%;
}

:deep(.el-calendar-table td) {
  text-align: center;
}

::v-deep(.el-calendar__body) {
  width: 312px;
  padding: 0;
}
</style>
